////////////////////////
///////// INTI ///////// 
////////////////////////

///////// INDEX //////// 
////////////////////////
// IMPORT
//// VARS
//// FONTS
// BASE
// LAYOUT

//// IMPORT /////
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900);

///// VARS //////
@orange				:	#c96041;
@orange-light		:	#dc846b;
@orange-dark		:	#b74a2a;
@green				:	#307e1b; 
@blue				:	#125490;
@blue-light			:	#1769b4;
@blue-dark			:	#0c3860;
@gray				:	#808181;
@gray-light			:	#eaeaea; // Main BG
@gray-dark			:	#4b5155; // Main TXT

@danger				:	#c63f3f;
@warning			:	#FFFF0D;
@success			:	#66c3a1;

// VARS
@image  :  "../img/";

// BACKGROUND
.background (@name) {
 	background: url('../images/@{name}') no-repeat;
 }

///// FOTNS /////
.TitilliumR {font-family: 'Titillium Web', sans-serif; font-weight: 400; font-style: normal;}
.TitilliumRI {font-family: 'Titillium Web', sans-serif; font-weight: 400; font-style: italic;}
.TitilliumEL {font-family: 'Titillium Web', sans-serif; font-weight: 200; font-style: normal;}
.TitilliumELI {font-family: 'Titillium Web', sans-serif; font-weight: 200; font-style: italic;}
.TitilliumL {font-family: 'Titillium Web', sans-serif; font-weight: 300; font-style: normal;}
.TitilliumLI {font-family: 'Titillium Web', sans-serif; font-weight: 300; font-style: italic;}
.TitilliumSB {font-family: 'Titillium Web', sans-serif; font-weight: 600; font-style: normal;}
.TitilliumSBI {font-family: 'Titillium Web', sans-serif; font-weight: 600; font-style: italic;}
.TitilliumB {font-family: 'Titillium Web', sans-serif; font-weight: 700; font-style: normal;}
.TitilliumBI {font-family: 'Titillium Web', sans-serif; font-weight: 700; font-style: italic;}
.TitilliumUB {font-family: 'Titillium Web', sans-serif; font-weight: 900; font-style: normal;}


	// SUBRRALLADO
	  .subrrallado (@width: 125px, @height: 3px, @top: 50px, @color: white) {
	    position: relative;
	    &:after {
	        content: "";
	        background: @color;
	        width: @width;
	        height: @height;
	        margin-left: (-@width / 2);
	        position: absolute;
	        top: @top;
	        left: 50%;
	    }
	  }        
	//


/////////////////
///// BASE //////
/////////////////

// RESET 
a, .btn, input[type=text], input[type=password], input[type=email], textarea {
	outline: none;
	box-shadow: none;
	text-shadow: none;
	&:focus {
		outline: none;
		box-shadow: none;
	}
}

textarea {
	resize: none;
}

h1, h2, h3, h4, h5 {
	margin: 0px;
}

// TEXT ALING
.txtR {
	text-align: right;
}
.txtL {
	text-align: left;
}
.txtC {
	text-align: center;
}
.txtJ {
	text-align: justify;
}

// HORIZONTAL-LIST
.horizontal-list {
	padding: 0;

	>li {
		display: inline-block;

	}
}	

// SIZE (alto y ancho)
.size (@width:auto, @height:auto) {
	width: @width;
	height: @height;
}

// POSITIONING
.pos-rel {
	position: relative;
}

.pos-abs {
	position: absolute;
}

.pos-fixed {
	position: fixed;	
}

.pos-static {
	position: static;
}

// POSICIONAMIENTO ABSOLUTO (mixin)
.a-pos (@top:0px, @left:0px, @bottom:auto, @right:auto) {
	position: absolute;
	top: @top;
	left:@left;
	bottom:@bottom;
	right:@right;
}

// QUIQCK FLOATS
.fl {
	float: left;		
}
.fr {
	float: right;
}
.fn {
	float: none;
}
.cl {
	clear: left;
}
.clr {
	clear: right;
}
.clb {
	clear: both;
}

// BOX SIZING
* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}

.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

.bxsg (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

// BLOCK - INLINE
.di, .disp-inline, .inline {
	display: inline;
}
.db, .disp-block .block {
	display: block;
}
.dib, .disp-inline-block .inline-block{	
	display: inline-block;
}

// CLEARFIX
.group:after {
  	content: "";
  	display: table;
  	clear: both;
}

// BLOCK TEXT CENTERED
.block-text-centered, .bk-txtctr {
	display: block;
	text-align: center;

}

// VERTICAL CENTER
.vertical-center {		   	
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
	  -ms-transform: translateY(-50%);
		  transform: translateY(-50%);
}

// BLOCK CENTER
.bkctr, .block-centered {

	margin-left: auto;
	margin-right: auto;
	display: block;
}

// VERTICAL ALIGN
.vat {
	vertical-align: top;	
}
.vam {
	vertical-align: middle;	
}
.vab {
	vertical-align: bottom;	
}
.vabl {
	vertical-align: baseline;	
}

.mt10 {
	margin-top: 10px;
}

.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}

small {
	color:@green;
}

/////////////////
//// LAYOUT /////
/////////////////	

html, body, form { height: 100%;}

// FONTS - BASE FONT SETTINGS
html {
  font-size: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

// GENERAL

body {
  font-size: 14px;
  color: @gray;
  background-color: @gray-light;
  .TitilliumR;
}

// FONT SIZE 
.fsz (@size: 14px;){
	font-size: @size;
}

// COLORES TEXTO
.txtDanger {
  color: @danger;
}
.txtWarning {
  color: @warning;
}
.txtSuccess {
  color: @success;
}
.txtGreyl {
  color: @gray-light;
}
.txtGrayd {
  color: @gray-dark;
}
.txtGray {
  color: @gray;
}
.txtBlue {
  color: @green;
}

// LINKS - Base link settings
a {
	color: #000;
	text-decoration: none!important;

	&:hover,
	&:focus {
		color: #000;
		text-decoration: underline;
	}
}

// HEADER
header {
	background-color: @green;
	
	.btn-default {
		margin-top: 95px;
		font-size: 0.8em;
	}
}
.container-header {
	min-height: 137px;
	background: url('@{image}pattern.png') right top no-repeat;
}

.logo {
	background: url('@{image}logo.png') right top no-repeat;
	width: 120px;
	height: 137px;
}

.main-nav {
	margin: 20px 0 30px;
	padding: 0;
	border-bottom: 1px solid #d0d0d0;
}

.main-nav {
	ul {
		margin: 0;
		padding: 0;
		li {
			list-style: none;
			.dib;
			
			a {
				.pos-rel;
				padding: 15px 20px 25px;
				font-size: 1.21em;
				text-transform: uppercase;
				.db;
				.TitilliumR;
				
				&:hover {
					&:after {
						content: " ";
						.pos-abs;
						background: @gray;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 5px;						
					}
				}				
			}
			&.active {
				a {
					cursor: default;
					color: @green;
					&:after {
						content: " ";
						.pos-abs;
						background: @green;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 5px;						
					}
				}
			}
		}
	}
}

.panel {
	border-radius: 2px;
}

.nav-tabs {
	margin-top: 25px;

	li {
		a {
			background-color: @gray-light;
			color: @gray;
			border-bottom: 1px solid #dddddd;
		}

		&.active {
			a {
				border-bottom: 1px solid white;
			}			
		}
	}
}

.tab-content {
	padding-top: 20px;
}

.pagination {
	margin: 0 0 10px;
	
	li {
		a {
			background-color: @gray-light;
			color: @gray;
			border: none;
		}
		
		&:first-child, &:last-child {
			a {
				border-radius: 0px;
				color: @gray-light;
				background-color: @gray;
			}
		}
	}
}

label {
	.TitilliumL;
}

input[type=text], input[type=password], input[type=email] {
	border-radius: 2px;
	background: @gray-light;
}

input[type=text], input[type=number], input[type=date], textarea{
	text-transform: uppercase;
	outline: none;
}

input[type=name]{
	outline: none;
}

 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
     margin: 0; 
}

.btn {
	border-radius: 2px;
	
	&.btn-default {
		color: white;
		background: @gray;
		border-color: @gray;
		
		&:hover {
			color: @gray;
			background: white;
			border-color: @gray;
		}
		&.btn-exit {
			color: white;
			background: none;
			border-color: white;
			
			&:hover {
				color: @green;
				background: white;
			}
		}
	}
	
	&.btn-primary {
		background-color: @orange;
		border-color: @orange;
		
		&:hover {
			background-color: @orange-light;
			border-color: @orange-light;
		}
	}
}

.breadcrumb {
	background: none!important;
	border: 1px solid @gray-light;
	border-radius: 2px;
	margin-bottom: 10px;
	padding: 8px 15px 8px 0;	
	list-style: none;	
}

.table-content {
	width: 100%;
	margin-bottom: 15px;
	overflow-y: auto;
}

table {
	text-transform: uppercase;
	thead {
		background-color: @gray-light;
		th {
			a {
				color: @gray;
			}
		}
	}
	
	&.table-product {
		thead {
			th {
				width: 20%;
				
				&:first-child {
					width: 30%;
				}
				
				&:last-child {
					width: 10%;
				}
			}
		}
	}
	
	&.table-persons {
		thead {
			th {
				width: 12%;
				
				&:first-child {
					width: 28%;
				}
				
				&:nth-of-type(4) {
					width: 10%;
				}
				
				&:last-child {
					width: 10%;
				}
			}
		}
	}
	
	&.table-my-projects {
		margin-top: 20px;
	}

	&.table-payments {
		margin-top: 20px;
		thead {
			th {
				width: 20%;
				
				&:first-child {
					width: 10%;
				}
				
				&:last-child {
					width: 10%;
				}
			}
		}	
	}

	&.table-small {
		margin-top: 20px;
		thead {
			th {
				max-width: 75%;

				&:first-child {
					width: 10%;
				}
				&:last-child {
					width: 15%;
				}
			}
		}
	}

	&.table-report-list {
		margin-top: 20px;
		thead {
			th {
				max-width: 45%;

				&:first-child {
					width: 45%;
				}
				&:last-child {
					width: 10%;
				}
			}
		}
	}

	&.table-report-detail {
		margin-top: 20px;
		thead {
			th {
				max-width: 18%;

				&:first-child {
					width: 10%;
				}
			}
		}
	}

	&.table-report-expanded {
		margin-top: 20px;
		th, td {
			text-align: center;
		}
		thead {
			tr {
				th {
					min-width: 50px;	
					vertical-align: top;				

					&:first-child {
						min-width: 110px;
					}
				}
				&:first-child {
					min-height: 35px;
				}
				&:last-child {
					background-color: #f3f2f2;
				}
			}
		}
		tbody {
			tr {
				td {
					min-width: 150px;
				}
			}
		}	
	}

	&.table-tiny {
		thead {
			th {
				max-width: 65%;

				&:first-child {
					width: 20%;
				}
				&:last-child {
					width: 15%;
				}
			}
		}	
	}
}

.head-small {
	h4 {
		padding-top: 15px;
	}
}

// DROPDOWN

.dropdown {
	position: relative;
	border: 2px solid @gray;
    border-radius: 2px;
    width: 100%;
    background-color: @gray;
    text-transform: uppercase;
    outline: none;

	a {
		display: block;
		padding: 5px 8px;
	    width: 100%;
	    color: @gray-light;	
	}

	.fa {
		float: right;
        margin-top: 2px;
		font-size: 1.1em;
        color: @gray-light;
	}

	.dropdown-menu {
		width: 100%;
		max-height: 300px;
		overflow: auto;

		a {
			display: block;
			&:hover {
				background: @gray-light;
			}
		}
	}
}

.dropdown-menu > li > a {
  text-transform: uppercase;
}

.form-inline {
	.form-group {
		margin-bottom: 15px;
		vertical-align: top;
	}
}

// TOOLTIP

.tooltip {
	.tooltip-arrow {
		border-top-color: @orange!important;
	}
	
	.tooltip-inner {
		background-color: @orange;
	}
	
	&.active {
		opacity: 1;
	}
}

// DATEPICKER

.date-form { margin: 10px; }
label.control-label span { cursor: pointer; }

// LOGIN

.login {
	background-color: @green;
	width: 320px;
	min-height: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 20px;
}

.form-signin {
	.logo {
		margin: 50px auto 0;
	}
	
	h3 {
		margin: 15px -20px;
		padding: 10px 0;
		color: white;
		border-top: 1px solid @gray-light;
		border-bottom: 1px solid @gray-light;
	}
}

.checkbox {
	margin-left: 20px;
}

label {
	color: @gray;
}

.login { 
	label {
		color: @gray-light;
	}
}

// FORMS LIST
.forms-list {
	.form-control {
		display: inline-block;
		width: auto;
	}
	hr {
		margin: 50px 0 20px;
		border: 1px dotted @gray-light;
	}
	.signature {
		margin-top: 50px; 
	}
}

// FORMS PARAMETERS
.formParameters{
	padding: 15px;
	border-bottom: 5px solid #eaeaea;	
}

.parameterTitle{
	margin-bottom: 5px;
}

// MODAL
.modal-body label, .modal-title {
	text-transform: uppercase;
}
.modal-body .list-group {
	margin-top: 20px;
	text-transform: uppercase;
}
.modal-body blockquote:before {
	content: none;
}
.modal-body blockquote {
	color: @blue;
}
.modal-body blockquote span {
	color: @gray;
}